<template>
    <up-tabbar
	  id="customTabBar"
	  ref="customTabBarRef"
      :value="parseInt(currentIndex)"
      :fixed="true"
      :safeAreaInsetBottom="true"
      activeColor="#49BDFB"
	  style="height: 200rpx;"
    >
		<block v-for="(item,index) in tabbarList" :key="index">
			<up-tabbar-item :text="item.text" :icon="item.icon" @click="handleClick(item.path)" v-if="item.badge" :badge="item.badge"></up-tabbar-item>
			<up-tabbar-item :text="item.text" :icon="item.icon" @click="handleClick(item.path)" v-else></up-tabbar-item>
		</block>
    </up-tabbar>
</template>
 
<script setup>
	
	import { ref,defineProps,onMounted } from 'vue'
	
	//接受父组件啊传参
	const props = defineProps({
		currentIndex: { //当前选中菜单下标值
			type: String, //若模板中不使用【parseInt】则需要设置为【Number】类型，否则选中样式失效
			default: 0
		}
	})
	
	//tabbar列表
	const tabbarList = [
		{ 
			text: "首页",
			path: "/pages/index/index",
			icon: "home",
			badge: false,
		},
		{
			text: "测试",
			path: "/pages/test/index",
			icon: "chat-fill",
			badge: 3,
		},
		{
			text: "我的",
			path: "/pages/my/index",
			icon: "account",
			badge: false,
		}
	];
	
	//点击菜单事件
	const handleClick = (data)=>{
		uni.navigateTo({
			url: data,
			animationType: 'none',
			animationDuration: 200
		});
	}
	
	//表单引用
	const customTabBarRef = ref(null);  
	
	//组件加载完成
	onMounted(() => {
		const query = uni.createSelectorQuery().in(customTabBarRef.value.customTabBar);
		query
		// .select("#customTabBar >>> .u-tabbar__content")//跨自定义组件的后代选择器
		.select("#customTabBar")
		.boundingClientRect((data) => {
			uni.setStorageSync("onReachBottom",data.height) //缓存tabbar高度
		})
		.exec();
	})
	
</script>
 
<style scoped>
</style>
